<template>
  <el-card class="box-card">
    <el-form ref="ruleFormRef"
             :model="infoForm"
             :rules="rules"
             label-width="120px"
             status-icon
    >
      <el-form-item label="图书编号" prop="id">
        <el-input v-model="infoForm.id" style="width: 400px" maxlength="20" clearable @blur="selectInfo"/>
      </el-form-item>
      <el-form-item label="图书名称" prop="book_name">
        <el-input v-model="infoForm.book_name" style="width: 400px" maxlength="30" clearable/>
      </el-form-item>
      <el-form-item label="作者编号" prop="book_author_id">
        <el-input v-model="infoForm.book_author_id" style="width: 200px" >
          <template #append>
            <el-button :icon="Search" @click="dialogSelectAuthor = true"/>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="出版社">
        <el-input v-model="infoForm.press" style="width: 400px" ></el-input>
      </el-form-item>
      <el-form-item label="出版日期">
        <div class="demo-date-picker">
          <div class="block">
            <el-date-picker
                v-model="infoForm.publication_date"
                type="date"
                placeholder="请选择日期"
                editable="editable"
            />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="图书来源" prop="book_source">
        <el-radio-group v-model="infoForm.book_source">
          <el-radio label="购入" />
          <el-radio label="他人赠与" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="图书状态" prop="book_status" style="font-weight: bold">
        <el-tag type="success">{{ book_status_val }}</el-tag>
      </el-form-item>

      <el-form-item label="图书简介">
        <el-input
            v-model="infoForm.book_introduction"
            :rows="10"
            type="textarea"
            style="width: 800px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(ruleFormRef)">更新</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!--作者信息查询框-->
  <el-dialog v-model="dialogSelectAuthor" id="authorDialog" title="作者信息查询">
    <el-form :model="authorForm" label-width="100px">
      <el-form-item label="作者姓名" label-width="70px">
        <el-input v-model="authorForm.book_author_name" maxlength="10" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" id="searchAuthor" @click="searchAuthor">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTableRef"
              :data="authorTable"
              v-if="authorHiddenFlg"
              max-height="200px"
              table-layout="auto"
              border
              resizable
              @select="handleSelectClick"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50" />
      <el-table-column property="id" label="作者编号" width="150" />
      <el-table-column property="book_author_name" label="作者姓名" width="200" />
      <el-table-column property="author_press" label="作者简介" />
    </el-table>
    <el-button type="success" id="confirm" v-if="authorHiddenFlg" @click="confirm">确认</el-button>
  </el-dialog>

</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import { Search } from '@element-plus/icons-vue';
import {selectAuthor} from '@/api/base/selectAuthor.ts';
import type{ElTable, FormRules ,FormInstance} from "element-plus";
import {selectBook} from "@/api/base/selectBook.ts";
import {updateBook} from "@/api/base/updateBook.ts";

const dialogSelectAuthor = ref(false)
const authorTable = ref([])
const authorHiddenFlg = ref(false)
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const ruleFormRef = ref<FormInstance>()
const book_status_val = ref('')
const selectionChecked = ref('')

interface RuleForm {
  id: string
  book_name: string
  book_author_id: string
  type_id1: string
  type_id2: string
  type_id3: string
  press: string
  publication_date: string
  book_introduction: string
  book_source: string
  book_status: string
}

// 表单数据
const infoForm = reactive<RuleForm>({
  id: '',
  book_name: '',
  book_author_id: '',
  type_id1: '',
  type_id2: '',
  type_id3: '',
  press: '',
  publication_date:'',
  book_introduction:'',
  book_source:'',
  book_status: '0'
})

// 表单数据 变更前
const infoFormBef = reactive({
  id: '',
  book_name: '',
  book_author_id: '',
  type_id1: '',
  type_id2: '',
  type_id3: '',
  press: '',
  publication_date:'',
  book_introduction:'',
  book_source:'',
  book_status: '0'
})

// 表单校验
const rules = reactive<FormRules<RuleForm>>({
  id: [
    { required: true, message: '请输入图书编号', trigger: 'blur' }
  ]
})

// 查询图书信息
const selectInfo = () => {
  if (infoForm.id === ''){
    ElMessage.error('请输入图书编号')
  }else{
    // 调用查询作者信息后端登录接口
    selectBook({
      bookId: infoForm.id
    }).then((res) => {
      infoForm.book_name = res.data.bookName
      infoForm.book_author_id = res.data.bookAuthorId
      infoForm.press = res.data.press
      infoForm.publication_date = res.data.publicationDate
      infoForm.book_source = res.data.bookSource
      infoForm.book_introduction = res.data.bookIntroduction
      switch(res.data.bookStatus)
      {
        case '0':
          book_status_val.value = '在库中'
          break;
        case '1':
          book_status_val.value = '借阅申请中'
          break;
        case '2':
          book_status_val.value = '已借阅'
          break;
        case '3':
          book_status_val.value = '归还申请中'
          break;
        case '4':
          book_status_val.value = '已归还'
          break;
        case '5':
          book_status_val.value = '丢失'
          break;
        default:
          book_status_val.value = '废弃'
      }
      infoFormBef.id = res.data.id
      infoFormBef.book_name = res.data.bookName
      infoFormBef.book_author_id = infoForm.book_author_id
      infoFormBef.press = res.data.press
      infoFormBef.publication_date = res.data.publicationDate
      infoFormBef.book_source = res.data.bookSource
      infoFormBef.book_introduction = res.data.bookIntroduction
    })
  }
}

// 表单提交
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      let count = 0;
      if(infoForm.book_name != infoFormBef.book_name){
        count++
      }
      if(infoForm.book_author_id != infoFormBef.book_author_id){
        count++
      }
      if(infoForm.press != infoFormBef.press){
        count++
      }
      if(infoForm.publication_date != infoFormBef.publication_date){
        count++
      }
      if(infoForm.book_source != infoFormBef.book_source){
        count++
      }
      if(infoForm.book_introduction != infoFormBef.book_introduction){
        count++
      }
      if (count === 0){
        ElMessage.error('数据未变更')
      }else (
          // 调用新建入库后端登录接口
          updateBook({
            bookId: infoForm.id,
            bookName: infoForm.book_name,
            bookAuthorId: infoForm.book_author_id,
            typeId1: '',
            press: infoForm.press,
            publicationDate: infoForm.publication_date,
            bookIntroduction: infoForm.book_introduction,
            bookSource: infoForm.book_source,
            bookStatus: infoForm.book_status
          }).then(() => {
            ElMessage({
              message: '更新成功',
              type: 'success',
            })
          })
      )
    } else {
      ElMessage.error('更新失败')
    }
  })
}

// 作者信息数据
const authorForm = reactive({
  book_author_name: ''
})


// 查询作者编号
const searchAuthor = () => {
  if (authorForm.book_author_name === ''){
    ElMessage.error('请输入作者姓名')
  }else{
    // 调用查询作者信息后端登录接口
    selectAuthor({
      bookAuthorName: authorForm.book_author_name
    }).then((res) => {
      authorHiddenFlg.value = true;
      authorTable.value = res.data.map((item: any) => {
        return {
          id: item.id,
          book_author_name: item.bookAuthorName,
          author_press: item.authorPress
        }
      });
    })
  }
}

// 获取选中当前行数据
const handleSelectionChange = (checked:any) => {
  if(checked.length > 0){
    selectionChecked.value = checked[0].id
  }
}

// 复选框变单选
const handleSelectClick = (selection:any) => {
  if (selection.length > 1) {
    const del_row = selection.shift()
    multipleTableRef.value!.toggleRowSelection(del_row, false)
  }
}

// 确定返回
const confirm = () => {
  if(selectionChecked.value === ''){
    ElMessage.error('请选择作者信息')
  }else{
    infoForm.book_author_id = selectionChecked.value
    dialogSelectAuthor.value = false
  }
}

</script>

<style scoped lang="scss">
::v-deep thead .el-table-column--selection .cell{
  display: none;
}
#authorDialog el-form{
  margin: 0 auto;
}

#authorDialog #searchAuthor{
  height: 40px;
  width: 70px;
  /* 开启定位 */
  position: relative;
  left: 100%;
  /* margin-left 为 负的宽度的一半 */
  margin-left: -150px;
}

#authorDialog #confirm{
  height: 40px;
  width: 70px;
  /* 开启定位 */
  position: relative;
  left: 100%;
  /* margin-left 为 负的宽度的一半 */
  margin-left: -150px;
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

</style>
